<!DOCTYPE html>
<html lang="zh-CN">

<head>
    
        <meta charset="utf-8" />
<title>
    文章 | Alger&#39;s blog
</title>
<!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script><![endif]-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<meta name="author" content="Alger">
<meta name="description" content="">
<meta name="keywords" content="">
<script async src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
<link rel="stylesheet" href="http://www.myalger.ml/styles/main.css" />
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/itjoker233/Gridea-theme-Chic/assets/media/css/style.min.css" />
        <script src="https://cdn.jsdelivr.net/gh/itjoker233/Gridea-theme-Chic/assets/media/script/tocbot.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/itjoker233/Gridea-theme-Chic/assets/media/script/script.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/itjoker233/Gridea-theme-Chic/assets/media/script/icon.min.js"></script>
        
            <script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/Card/prism.min.js"></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/css/Card/prism.min.css" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
            <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js"></script>
            
                <!--点击特效-->
                <script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>
                
                        <!--CDN样式-->
                        <script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/hit-kounter-lc-0.3.0.js"></script>
                        <script src="https://cdn1.lncld.net/static/js/av-min-1.5.0.js"></script>
                        
                            <script>
                                (function() {
                                    var bp = document.createElement('script');
                                    var curProtocol = window.location.protocol.split(':')[0];
                                    if (curProtocol === 'https') {
                                        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
                                    } else {
                                        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
                                    }
                                    var s = document.getElementsByTagName("script")[0];
                                    s.parentNode.insertBefore(bp, s);
                                })();
                            </script>
                            
                                    <script type="text/javascript">
                                        var _hmt = _hmt || [];
                                        (function() {
                                            var hm = document.createElement("script");
                                            hm.src = "https://hm.baidu.com/hm.js?10269f9b0a4f16f8a55ea03a248b0493";
                                            var s = document.getElementsByTagName("script")[0];
                                            s.parentNode.insertBefore(hm, s);
                                        })();
                                    </script>
                                    
            
</head>

<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo">
                <a href="http://www.myalger.ml">
                    Alger&#39;s blog
                </a>
            </div>
            <div id="tp-weather-widget"></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/">
                        首页
                    </a>
                    
                    <a class="menu-item" href="/archives">
                        归档
                    </a>
                    
                    <a class="menu-item" href="/tags">
                        标签
                    </a>
                    
                    <a class="menu-item" href="/about">
                        关于
                    </a>
                    
                        <input id="switch_default" type="checkbox" class="switch_default">
                        <label for="switch_default" class="toggleBtn"></label>
            </div>
            <form id="gridea-search-form" data-update="1598520023486" action="/search/index.html">
                <input class="search-input" autocomplete="off" spellcheck="false" name="q" autofocus="true" placeholder="Search...">
            </form>
        </div>
    </nav>

    
        <nav class="navbar-mobile" id="nav-mobile">
            <div class="container">
                <div class="navbar-header">
                    <div>
                        <a href="http://www.myalger.ml">
                            Alger&#39;s blog
                        </a>
                        <!--en-->
                        <a id="mobile-toggle-theme-en" class="a en">&nbsp;Dark</a>
                        <!--zh-->
                        <a id="mobile-toggle-theme-zh" class="a zh">&nbsp;&#x6697;&#x9ED1;</a>
                    </div>
                    <form id="gridea-search-form" data-update="1598520023486" action="/search/index.html">
                        <input class="search-input" autocomplete="off" spellcheck="false" name="q" autofocus="true" placeholder="Search...">
                    </form>
                    <!--en-->
                    <div class="menu-toggle" id="menu-toggle-en" onclick="mobileBtn()">&#9776; Menu</div>
                    <!--zh-->
                    <div class="menu-toggle" id="menu-toggle-zh" onclick="mobileBtn()">&#9776; &#x83DC;&#x5355;</div>

                </div>
                <div class="menu" id="mobile-menu">
                    
                        <a class="menu-item" href="/">
                            首页
                        </a>
                        
                        <a class="menu-item" href="/archives">
                            归档
                        </a>
                        
                        <a class="menu-item" href="/tags">
                            标签
                        </a>
                        
                        <a class="menu-item" href="/about">
                            关于
                        </a>
                        
                </div>
            </div>
        </nav>
</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementById("menu-toggle-en");
        var toggleMenu_zh = document.getElementById("menu-toggle-zh");

        var mobileMenu = document.getElementById("mobile-menu");
        if (toggleMenu.display != "none") {
            if (toggleMenu.classList.contains("active")) {
                toggleMenu.classList.remove("active")
                mobileMenu.classList.remove("active")
            } else {
                toggleMenu.classList.add("active")
                mobileMenu.classList.add("active")
            }
        } else if (toggleMenu_zh.display != "none") {
            if (toggleMenu_zh.classList.contains("active")) {
                toggleMenu_zh.classList.remove("active")
                mobileMenu.classList.remove("active")
            } else {
                toggleMenu_zh.classList.add("active")
                mobileMenu.classList.add("active")
            }
        }

    }
</script>

            <div class="post-main">
                <div class="post-list">
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
        
                
                    
    
                    
                        
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/zheng-ze-biao-da-shi-xue-xi/">
                                                <h2 class="post-title">
                                                    正则表达式学习🏓
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。</p>
<p>正则表达式是繁琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/G4NR921eB/">
          Share
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/zheng-ze-biao-da-shi-xue-xi/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/03/04/3om0zV.jpg')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/aspnet-yong-placeholder-dong-tai-tian-jia-zu-jian-shi-xian-dan-xuan-ti-mu/">
                                                <h2 class="post-title">
                                                     ASP.NET用PlaceHolder动态添加组件实现单选题目
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>利用<code>PlaceHolder</code>控件实现一个包含单项选择题的测试页面，其中题目信息包含于数组中。</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/NQvaoSPkJ/">
          ASP.NET
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/aspnet-yong-placeholder-dong-tai-tian-jia-zu-jian-shi-xian-dan-xuan-ti-mu/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/29/3yZRo9.png')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/javascript-ji-chu-shu-ju-lei-xing/">
                                                <h2 class="post-title">
                                                    JavaScript基础- 数据类型🔨
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>ES5中有六种数据类型<br>
js中的数据类型为字面变量 以它的值来定义数据类型</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/He-D_m5QM/">
          JavaScript
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/javascript-ji-chu-shu-ju-lei-xing/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/29/3sIvnJ.jpg')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/javascript-vuejs-ji-chu-xue-xi/">
                                                <h2 class="post-title">
                                                    JavaScript----Vue.js基础学习 🚀
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>Vue 是一套用于构建用户界面的渐进式框架Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。能够为复杂的单页应用提供驱动。</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/He-D_m5QM/">
          JavaScript
          
          ,
          
        </a>
        
        <a href="http://www.myalger.ml/p9SDW22Ljl/">
          Vue.js
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/javascript-vuejs-ji-chu-xue-xi/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/29/3yS0oT.png')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/android-ji-suan-qi-an-li/">
                                                <h2 class="post-title">
                                                     Android计算器案例🤖
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>使用简单的网格布局管理器来实现界面🧨<br>
然后使用java代码来实现计算器的操作🎉</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/uXar5IwUu/">
          Android
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/android-ji-suan-qi-an-li/">
    <div class="feature-container" style="background-image: url('https://s1.ax1x.com/2020/03/13/8u9qLn.jpg')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/jiao-ni-yong-dai-ma-xie-yi-ge-shi-shi-yi-qing-tu/">
                                                <h2 class="post-title">
                                                    教你用代码写一个实时疫情图😷
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>🤧这两天疫情越来越严重，各个大公司都做了<strong>实时疫情图</strong>，这里来教一下大家如何用代码来实现</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-03-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/G4NR921eB/">
          Share
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/jiao-ni-yong-dai-ma-xie-yi-ge-shi-shi-yi-qing-tu/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/04/1D0mGR.png')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/css-dong-hua-zhi-zuo-xuan-zhuan-mu-ma/">
                                                <h2 class="post-title">
                                                    CSS动画制作旋转木马🦄
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>主要用到了<code>animation</code>动画  <code>transform</code>  旋转<code>perspective</code>产生透视效果 控制好图片的距离，理解三维模型，可以很简单的做出旋转木马。</p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-02-14</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/FoJvIOEID/">
          HTML
          
          ,
          
        </a>
        
        <a href="http://www.myalger.ml/Io18193yza/">
          CSS
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/css-dong-hua-zhi-zuo-xuan-zhuan-mu-ma/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/29/3y9iCD.png')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                
                                    <section class="post-item">
                                        <div class="content">
                                            <a href="http://www.myalger.ml/htmlcss-mo-fang-shang-pin-zhan-shi/">
                                                <h2 class="post-title">
                                                    HTML+CSS 模仿商品展示 💻
                                                </h2>
                                            </a>
                                            <div class="post-abstract">
                                                <p>💁今天我们来实现一个简单的<strong><strong>商品展示</strong></strong>小页面</p>
<p>用到的知识主要是<code>:hover</code>和<code>position</code></p>

                                            </div>
                                            <div class="post-info">
                                                <span><i class="fa fa-calendar" aria-hidden="true"></i> 2020-02-13</span>
                                                
                                                    <span>
        <i class="fa fa-tags" aria-hidden="true"></i>
        
        <a href="http://www.myalger.ml/FoJvIOEID/">
          HTML
          
          ,
          
        </a>
        
        <a href="http://www.myalger.ml/Io18193yza/">
          CSS
          
        </a>
        
      </span>
                                                    
                                            </div>
                                        </div>
                                        
                                            <a href="http://www.myalger.ml/htmlcss-mo-fang-shang-pin-zhan-shi/">
    <div class="feature-container" style="background-image: url('https://s2.ax1x.com/2020/02/04/1D9VhT.gif')">
    </div>
  </a>
                                            
                                    </section>
                                    
                                        
                                            
                            
                                            
                </div>
            </div>
    </div>
    
        <footer id="footer" class="footer">
            <div class="copyright">
                
                    <div class="Like">
                        <div class="tip" data-tooltip="Do you like it?">
                            <a href="https://github.com/ITJoker233/Gridea-theme-Chic" target="_blank" title=""><svg class="icon"
                        aria-hidden="true">
                        <use xlink:href="#like"></use>
                    </svg><b class="like_text" id="star"></b></a>
                        </div>
                    </div>
                    
                        Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
                            
                                <b id="hitokoto"></b><br>
                                
                                        <svg viewBox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="8" height="8" class="my-face">
            <path
                d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
                fill="#93b5cf"></path>
        </svg>
                                        Alger&#39;s blog &copy;Copyright
                                            <script>
                                                var date = new Date();
                                                document.write("" + date.getFullYear());
                                            </script>
                                            | Powered by
                                            <a href="https://coding.net" target="_blank">
                                                Coding.net
                                            </a>
            </div>
            <div id="update" style="display:none;">
                on
            </div>
            
                <div id="version" style="display:none;">
                    1.7.6
                </div>
                
                    <script>
                        var port = '';
                        
                        document.write('<div id="home_path" style="display:none;">' + document.location.protocol + '//' + window.document.location.hostname + port + '</div>')
                    </script>
        </footer>
        
                <script>
                    
                    
                    
                    hitokoto();
                    
                    getStar();
                    hljs.initHighlighting();
                    console.clear();
                    
                    CheckVersion();
                    
                    var newDate = new Date();
                    newDate.setTime(1598520023486);
                    console.log(" Blog Update Time: " + newDate.toLocaleDateString());
                    console.log("\n %c \u26a1Theme:Chic Author's Blog:https://blog.itjoker.cn  Write By ITJoker  \n\n", "color: #ffffff; background: rgba(49, 49, 49, 0.85); padding:5px 0;border-radius:5px;");
                </script>
</body>

</html>